<template>
  <div class="wrap">
    <van-nav-bar title="设置" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" style="color: #000; font-size: 24px" />
      </template>
    </van-nav-bar>
    <van-cell style="display: flex; align-items: center; margin-top: 5px" @click="gotoBank">
      <template #title>
        <div style="display: flex; align-items: center">
          <!-- <img :src="userImg" alt="" style="width: 50px; height: 50px; border: 1px solid #eee; margin: 5px" /> -->
           <Image :dataSrc="userImg" alt="" style="width: 50px; height: 50px; border: 1px solid #eee; margin: 5px" ></Image>
          <p>{{ userName }}</p>
        </div>
      </template>
      <template #right-icon>
        <van-icon name="arrow" />
      </template>
    </van-cell>

    <van-cell v-for="(value, index) in seTList" :key="index" style="display: flex; align-items: center; margin-top: 5px"
      @click="() => gotoVancell(index)">
      <template #title>
        <div style="display: flex; align-items: center">
          {{ value }}
        </div>
      </template>
      <template #right-icon>
        <van-icon name="arrow" />
      </template>
    </van-cell>

    <van-nav-bar style="margin: 5px 0" @click="gotoBack()">
      <template #title>
        <span style="color: red">退出登录</span>
      </template>
    </van-nav-bar>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import Image from '../../components/image/index.vue'

const userName = JSON.parse(localStorage.getItem("result") as string).nickName
const userImg = JSON.parse(localStorage.getItem("result") as string).headPic
const router = useRouter()
const onClickLeft = () => {
  router.push('/my')
}
const gotoBank = () => {
  router.push("/bank")
}
const gotoBack = () => {


  localStorage.removeItem('result')
  localStorage.removeItem('userId')
  localStorage.removeItem('sex')
  localStorage.removeItem('sessionId')
  router.push('/home')
}
const seTList = ['修改密码', '清除缓存', '屏幕亮度', '版本监测', '帮助中心', '关于我们', '邀请好友']
const gotoVancell = (index: number) => {
  switch (index) {
    case 0:
      router.push('/modify')
      return
    case 1:
      router.push('/bank')
      return
    case 2:
      router.push('/screen')
      return
    case 3:
      router.push('/vrsion')
      return
    case 4:
      router.push('/bank')
      return
    case 5:
      router.push('/bank')
      return
    case 6:
      router.push('/invite')
      return
  }
}
</script>
<style>
@import './manage.scss';
</style>